import { useState, useEffect } from "react";
import "../../common/common.css";
import _ from "lodash";
import { Button, Table, Tabs, Modal, Popover, Collapse, FloatButton } from "antd";
import { VerticalAlignTopOutlined } from "@ant-design/icons";
import type { CollapseProps } from "antd";
import { ArrayData } from "./LodashUse/LodashArray";
import { AssembleData } from "./LodashUse/LodashAssemble";
import { FunctionData } from "./LodashUse/LodashFunction";
import { LanguageData } from "./LodashUse/LodashLanguage";
import { MathsData } from "./LodashUse/LodashMaths";
import { ObjectData } from "./LodashUse/LodashObject";
import { StringData } from "./LodashUse/LodashString";
import { PanelArrayData } from "./LodashUse/PanelArray";
import { PanelObjectData } from "./LodashUse/PanelObject";
import { PanelStringData } from "./LodashUse/PanelString";
import { PanelAssembleData } from "./LodashUse/PanelAssemble";
import { PanelFunctionData } from "./LodashUse/PanelFunction";
import { PanelLanguageData } from "./LodashUse/PanelLanguageData";
import { PanelMathsData } from "./LodashUse/PanelMaths";
import Analysis from "./LodashUse/Analysis";

const CollapseItems: CollapseProps["items"] = [
    {
        key: "1",
        label: <span className="titleFontSize">数组</span>,
        children: <Collapse items={PanelArrayData} />,
    },
    {
        key: "2",
        label: <span className="titleFontSize">集合</span>,
        children: <Collapse items={PanelAssembleData} />,
    },
    {
        key: "3",
        label: <span className="titleFontSize">函数</span>,
        children: <Collapse items={PanelFunctionData} />,
    },
    {
        key: "4",
        label: <span className="titleFontSize">语言</span>,
        children: <Collapse items={PanelLanguageData} />,
    },
    {
        key: "5",
        label: <span className="titleFontSize">数字/数学</span>,
        children: <Collapse items={PanelMathsData} />,
    },
    {
        key: "6",
        label: <span className="titleFontSize">对象</span>,
        children: <Collapse items={PanelObjectData} />,
    },
    {
        key: "7",
        label: <span className="titleFontSize">字符串</span>,
        children: <Collapse items={PanelStringData} />,
    },
];

export default function Lodash() {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [modalContent, setModalContent] = useState("");
    const [isVisible, setIsVisible] = useState(false);

    // 添加滚动事件监听
    useEffect(() => {
        window.addEventListener("scroll", handleScroll);

        // 清理监听器，避免内存泄漏
        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

    const columns = [
        {
            title: "序号",
            dataIndex: "key",
            key: "key",
        },
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
            sorter: (a: any, b: any) => a.name.localeCompare(b.name),
            render: (text: string) => <span>{text}</span>,
        },
        {
            title: "简介",
            dataIndex: "remark",
            key: "remark",
            render: (text: string) => <div style={{ width: "100px" }}>{text}</div>,
        },
        {
            title: "描述",
            dataIndex: "description",
            key: "description",
        },
        {
            title: "使用",
            dataIndex: "use",
            key: "use",
        },
        {
            title: "返回",
            dataIndex: "return",
            key: "return",
        },
        {
            title: "参数",
            dataIndex: "argument",
            key: "argument",
            render: (text: string) => (
                <Popover content={<pre style={{ fontSize: "14px" }}>{text}</pre>} title="参数">
                    <div style={{ fontSize: "14px", maxWidth: "200px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{text}</div>,
                </Popover>
            ),
        },
        {
            title: "查看案例",
            dataIndex: "case",
            key: "case",
            render: (text: string) => (
                <div>
                    <Button onClick={() => showModal(text)} style={String(text).length > 9 ? { border: "2px solid #41C904" } : {}}>
                        查看
                    </Button>
                </div>
            ),
        },
    ];

    const tabsItems = [
        {
            key: "1",
            label: "Array数组",
            children: <Table columns={columns} dataSource={ArrayData} pagination={false} />,
        },
        {
            key: "2",
            label: "集合",
            children: <Table columns={columns} dataSource={AssembleData} pagination={false} />,
        },
        {
            key: "3",
            label: "函数",
            children: <Table columns={columns} dataSource={FunctionData} pagination={false} />,
        },
        {
            key: "4",
            label: "语言",
            children: <Table columns={columns} dataSource={LanguageData} pagination={false} />,
        },
        {
            key: "5",
            label: "数学/数字",
            children: <Table columns={columns} dataSource={MathsData} pagination={false} />,
        },
        {
            key: "6",
            label: "对象",
            children: <Table columns={columns} dataSource={ObjectData} pagination={false} />,
        },
        {
            key: "7",
            label: "字符串",
            children: <Table columns={columns} dataSource={StringData} pagination={false} />,
        },
    ];

    const showModal = (text: any) => {
        setIsModalOpen(true);
        setModalContent(text);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const onChange = (key: any) => {
        console.log(key);
    };

    const chunk = () => {
        const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
        const chunkedArray = _.chunk(array, 4);
        console.log(chunkedArray);
    };

    // 节流函数
    const throttle = function (func: any, delay: number) {
        let timer: any = null;
        return function (this: any) {
            const context: any = this;
            if (!timer) {
                timer = setTimeout(function () {
                    func.apply(context);
                    timer = null;
                }, delay);
            }
        };
    };

    const returnTop = () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth",
        });
    };

    // 监听滚动事件，使用防抖
    const handleScroll = throttle(() => {
        if (window.scrollY > 200) {
            setIsVisible(true);
        } else {
            setIsVisible(false);
        }
    }, 1500); // 1500毫秒的防抖延迟

    return (
        <div>
            <Button className="returnButton">
                <a href="/">点击返回主菜单</a>
            </Button>
            <FloatButton onClick={returnTop} icon={<VerticalAlignTopOutlined />} type="primary" style={{ right: 24, display: isVisible ? "block" : "none" }} />
            <div>
                <h1>
                    <a href="https://www.lodashjs.com/docs/lodash.isNaN">Lodash</a>
                </h1>
                <h3>lodash基本使用</h3>
                <div className="centerTextLeft">
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                        <span>
                            import _ from 'lodash'; <br />
                            const chunkedArray = _.chunk(array, 4); console.log(chunkedArray);
                            <br />
                        </span>
                        <button style={{ border: "1px solid #f88" }} onClick={chunk}>
                            {" "}
                            将数组（array）拆分成多个 size 长度的区块{" "}
                        </button>
                    </div>
                </div>
            </div>
            <hr />
            <Analysis/>
            <hr />
            <Collapse items={CollapseItems} />
            <hr />
            <div style={{ marginTop: "48px" }}>
                <Tabs defaultActiveKey="1" items={tabsItems} onChange={onChange} />
            </div>

            <Modal
                title="案例演示"
                width={800}
                onCancel={handleOk}
                open={isModalOpen}
                footer={
                    <Button type="primary" onClick={handleOk}>
                        {" "}
                        确定{" "}
                    </Button>
                }
            >
                {modalContent && modalContent.length > 9 ? <pre>{modalContent}</pre> : <span>暂时没有案例，待补充</span>}
            </Modal>
        </div>
    );
}
